<template>
	<view class="p-20">
		
	
	<view class="content bg-white p-b-10" @click="selectDriver" :class="driverId==item.id?'select-content':''">
		
		<view class="top-warp row-between flex p-l-10">
			<view class="flex">
				<image style="width: 40rpx;" src="../../static/images/Snipaste.png" mode="widthFix"></image>
				<view class="color-text m-l-24 lg">
					已报名
				</view>
				<view class="color-text lg m-l-34">
					{{item.quote_time}}
				</view>
			</view>
			<view class="xl color-text-prime bold p-r-30">
				{{item.money}}元/趟
			</view>
		</view>
		<view class="flex" style="width: 100%;height:152rpx;">
			<view class="flex p-l-40">
				<view class="header-img">
					<image :src="item.avatar" mode="widthFix"></image>
				</view>
			<view class="">
				<view class="m-l-30 flex">
					<view class="xxl line-1" style="width: 200rpx;">
						{{item.nickname}}
					</view>
					<view class="m-l-30 p-20 car-type" style="padding-top: 10rpx; padding-bottom: 10rpx;" >
						{{item.car_name}}
					</view>
					
				</view>
				<view class="m-t-15 flex">
					<view class=" m-l-40 flex">
						<image style="width: 30rpx;" src="../../static/images/ze-starCopy.png" mode="widthFix"></image>
						<view class="m-l-10 color-text flex-content">
							{{item.star}}
						</view>
					</view>
					<view class="apply-time m-l-30 flex-content">
								{{item.ctime}}注册
												</view>
				</view>
				<view class="m-l-40 color-text m-t-10">
					车厢尺寸:{{item.spe}}
				</view>
			</view>
			</view>
			<view class="select-icon" v-if="driverId==item.id">
				<image src="../../static/images/if-tick-mark.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {baseURL} from "@/config/app.js"
	export default {
	
		props:{
			driverId:{
				type:Number,
				default:0
			},
			item:{
				type:Object,
				default:()=>{}
			}
		},
		
		name:"driver-list",
		data() {
			return {
				
			};
		},
		
		created() {
			console.log(baseURL);
		},
		mounted() {
		
		},
		
		methods:{
			selectDriver(){
				this.$emit("selectDriver",this.item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-content{
		border: 2rpx dashed #E85631 !important;
		opacity: 1 !important;
	}
	.car-type{
		background-color: #FBF5E6 ;
		color: #E85631;
		border-radius: 5rpx;
		
	}
.content{
	opacity: 0.5;
	width: 100%;
	height: 251rpx;
	border-radius: 10rpx;
	position: relative;
	overflow: hidden;
}
.top-warp{
	width: 100%;
	height: 76rpx;
	background-image: linear-gradient(to,right,#E2ECFA,#fff);
}
.color-text{
	color: #9F9FA0 ;
}
.color-text-prime{
      color: #E85631;	
}
.header-img{
	overflow: hidden;
	width: 120rpx;
	height: 120rpx;
	background-color: #F29100;
	border-radius: 70rpx;
	image{
		width: 100%;
	}
}
.apply-time {
		width: 264rpx;
		height: 40rpx;
		border-radius: 12rpx;
		background-color: #F4F4F4;
		color: #807E7E;
	}
	.select-icon{
		position: absolute;
		right: 40rpx;
		top: 160rpx;
		image{
			width: 40rpx;
		}
	}
</style>
